/**
 * @Description: TableList操作列统一样式组件
 * @author developer-z
 * @date 2021/11/25
*/

import React, {cloneElement} from 'react';
import styles from './TableOperations.less'
import {getAuth} from '@/components/Auth/btn';
import {Dropdown} from 'antd';
import {EllipsisOutlined} from '@ant-design/icons';

function TableOperations({operations}) {
  const convertOperations = () => {
    let showOperations;
    let dropdownOperations;
    let authOperations = operations.filter(item => (getAuth(item.props.auth) || !item.props.auth) && !item.props.isHide);
    if (authOperations.length > 3) {
      showOperations = authOperations.slice(0, 1);
      dropdownOperations = authOperations.slice(1);
    } else if (authOperations.length > 0){
      showOperations = authOperations;
    }
    if (dropdownOperations) {
      showOperations.push(
        <Dropdown
          key='dropdown'
          placement='bottomCenter'
          arrow={true}
          overlay={
            <div className={styles.dropdownWrap}>
              {dropdownOperations.map(item => cloneElement(item, { isCancelPropagation: true }))}
            </div>
          }
        >
          <EllipsisOutlined style={{color: '#0E87FF', cursor: 'pointer'}}/>
        </Dropdown>
      )
    }
    return showOperations || '-';
  }

  return (
    <div className={styles.operationsWrap} onClick={event => {
      // 阻止事件传递,如果table 条目有点击事件时, 点击操作时不能往下传递,会触发行事件
      event && event.stopPropagation();
    }}>
      {convertOperations()}
    </div>
  );
}

// React.memo 在函数组件中使用,防止父组件更新时子组件也进行更新
export default React.memo(TableOperations);
